<template>

<div>
  <oolongTabs type="panel">
    <oolongTabPane label="标签一">标签一的内容</oolongTabPane>
    <oolongTabPane label="标签二">标签二的内容</oolongTabPane>
    <oolongTabPane label="标签三">标签三的内容</oolongTabPane>
  </oolongTabs>
  <oolongTabs value="name1">
    <oolongTabPane label="标签一" name="name1">标签一的内容</oolongTabPane>
    <oolongTabPane label="标签二" name="name2">标签二的内容</oolongTabPane>
    <oolongTabPane label="标签三" name="name3">标签三的内容</oolongTabPane>
  </oolongTabs>
  <oolongTabs value="name1">
    <oolongTabPane label="标签一" >标签一的内容</oolongTabPane>
    <oolongTabPane label="标签二" disabled>标签二的内容</oolongTabPane>
    <oolongTabPane label="标签三" >标签三的内容</oolongTabPane>
  </oolongTabs>
  <oolongTabs size="small">
    <oolongTabPane label="标签一" >标签一的内容</oolongTabPane>
    <oolongTabPane label="标签二">标签二的内容</oolongTabPane>
    <oolongTabPane label="标签三" >标签三的内容</oolongTabPane>
  </oolongTabs>

  <oolongTabs type="panel" closable @on-tab-remove="handleTabRemove">
    <oolongTabPane label="标签一" v-if="tab0">标签一的内容</oolongTabPane>
    <oolongTabPane label="标签二" v-if="tab1">标签二的内容</oolongTabPane>
    <oolongTabPane label="标签三" v-if="tab2">标签三的内容</oolongTabPane>
  </oolongTabs>

  <oolongTabs :animated="false">
    <oolongTabPane label="标签一">标签一的内容</oolongTabPane>
    <oolongTabPane label="标签二">标签二的内容</oolongTabPane>
    <oolongTabPane label="标签三">标签三的内容</oolongTabPane>
  </oolongTabs>
</div>
</template>

<script>
  export default{
    data () {
      return {
        tab0: true,
        tab1: true,
        tab2: true
      }
    },
    methods: {
      handleTabRemove (name) {
        this['tab' + name] = false;
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../resources/css/admin-template/oolong-container";
</style>
